<template>
    <div class="bgcolor">
        <div class="order-content">
            <div class="order-list">
                <div class="left">
                    <img src="../../../static/index/ym.jpg" alt="">
                    <div class="title">
                        <p>平视姚明</p>
                        <span>王猛</span>
                    </div>
                </div>
                <div class="price">
                    <span>估价</span>
                    <span>￥30.10</span>
                </div>
            </div>
            <ul class="fee">
                <li>
                    <span>总估价</span>
                    <span>￥30.10</span>
                </li>
                <li>
                    <span>运费</span>
                    <span>￥0.00</span>
                </li>
                <li>
                    <span>总估价</span>
                    <span>￥0.00</span>
                </li>
                <li>
                    <span>新用户福利</span>
                    <span>￥3.00</span>
                </li>
            </ul>
            <div class="shouru">
                <p class="per"><span>预计收入</span><span>￥33.10</span></p>
                <h5>回收须知</h5>
                <p class="notice">1.回收须知1</p>
                <p class="notice">2.回收须知2</p>
            </div>
        </div>
    </div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.bgcolor {
    background: #eeeeee;
    padding: 30rpx 0;
    .order-content {
        background: #fff;
        padding: 0 18rpx;
        padding-bottom: 30rpx;
        .order-list {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #dddddd;
            padding: 30rpx 0 20rpx 0;
            .left {
                margin-left: 30rpx;
                img {
                    float: left;
                    width: 88rpx;
                    height: 122rpx;
                    margin-right: 30rpx;
                }
                .title {
                    float: left;
                    p {
                        font-size: 28rpx;
                        font-weight: 700;
                        color: #2b2b2b;
                    }
                    span {
                        font-size: 24rpx;
                        color: #666;
                    }
                }
            }
            .price {
                span {
                    color: #666;
                    font-size: 24rpx;
                }
            }
        }
        .fee {
            border-bottom: 1px solid #dddddd;
            padding-top: 20rpx;
            padding-bottom: 20rpx;
            li {
                display: flex;
                justify-content: space-between;
                height: 50rpx;
                line-height: 50rpx;
                span {
                    font-size: 26rpx;
                    color: #666;
                }
            }
        }
        .shouru {
            padding-top: 30rpx;
            .per {
                text-align: right;
                span {
                    &:nth-child(1) {
                        font-size: 35rpx;
                        color: #2b2b2b;
                        font-weight: bolder;
                    }
                    &:nth-child(2) {
                        font-size: 28rpx;
                        color: #666;
                    }
                }
            }
            h5 {
                font-size: 28rpx;
                font-weight: bolder;
                color: #2b2b2b;
            }
            p.notice {
                color: #666;
                font-size: 24rpx;
                line-height: 24rpx;
                margin-top: 10rpx;
            }
        }
    }
}
</style>
